import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router';
import Test from '../views/Test.vue'

// const asyncPage = (path: string) => defineAsyncComponent(() => import(`@/views/${path}`))
const asyncPage = (path: string) => () => import(`@/views/${path}.vue`);

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'root',
    component: Test,
    meta: {
      breadcrumb: [
        { title: 'test', name: 'test', path: '/test' }
      ]
    }
  },
  {
    path: '/test',
    name: 'test',
    component: Test,
    meta: {
      breadcrumb: [
        { title: 'test', name: 'test', path: '/test' }
      ]
    }
  },
  {
    path: '/refs',
    name: 'refs',
    component: asyncPage('Refs'),
    meta: {
      breadcrumb: [
        { title: 'refs', name: 'refs', path: '/refs' }
      ]
    }
  },
  {
    path: "/provide-inject",
    name: "provide-inject",
    component: asyncPage('Provide-Inject'),
    meta: {
      breadcrumb: [
        { title: '深入组件', name: 'depthComponent', path: '' },
        { title: 'provide-inject', name: 'provide-inject', path: '/provide-inject' }
      ]
    }
  },
  {
    path: "/globalProperties",
    name: "globalProperties",
    component: asyncPage("GlobalProperties"),
    meta: {
      breadcrumb: [
        { title: '全局方法', name: 'globalProperties', path: '/globalProperties' },
      ]
    }
  },
  {
    path: "/directive",
    name: "directive",
    component: asyncPage("Directive"),
    meta: {
      breadcrumb: [
        { title: '自定义指令', name: 'directive', path: '/directive' },
      ]
    }
  }, {
    path: "/setup&props",
    name: "setup&props",
    component: asyncPage("Setup&Props"),
    meta: {
      breadcrumb: [
        { title: '组合式API', name: 'compositionAPI', path: '' },
        { title: 'setup&props', name: 'setup&props', path: '/setup&props' },
      ]
    }
  }, {
    path: "/reactiveTheory",
    name: "reactiveTheory",
    component: asyncPage("ReactiveTheory"),
    meta: {
      breadcrumb: [
        { title: '深入响应式原理', name: 'depthReactive', path: '' },
        { title: '响应式原理', name: 'reactiveTheory', path: '/reactiveTheory' },
      ]
    }
  }, {
    path: "/reactiveBasic",
    name: "reactiveBasic",
    component: asyncPage("ReactiveBasic"),
    meta: {
      breadcrumb: [
        { title: '深入响应式原理', name: 'depthReactive', path: '' },
        { title: '响应式基础', name: 'reactiveBasic', path: '/reactiveBasic' },
      ]
    }
  },
  {
    path: "/reactiveComputedOrWatch",
    name: "reactiveComputedOrWatch",
    component: asyncPage("ReactiveComputedOrWatch"),
    meta: {
      breadcrumb: [
        { title: '深入响应式原理', name: 'depthReactive', path: '' },
        { title: '响应式计算和监听', name: 'reactiveComputedOrWatch', path: '/reactiveComputedOrWatch' },
      ]
    }
  },
  {
    path: "/IconStatic",
    name: "IconStatic",
    component: asyncPage("IconStatic"),
    meta: {
      breadcrumb: [
        { title: '图标库', name: 'IconLib', path: '' },
        { title: '静态图标', name: 'IconStatic', path: '/IconStatic' },
      ]
    }
  },
  {
    path: "/Markdown",
    name: "Markdown",
    component: asyncPage("Markdown"),
    meta: {
      breadcrumb: [
        { title: 'Markdown', name: 'Markdown', path: '/Markdown' }
      ]
    }
  },
  {
    path: "/Recursion",
    name: "Recursion",
    component: asyncPage("Recursion"),
    meta: {
      breadcrumb: [
        { title: '组件的递归使用', name: 'recursionComponent', path: '' },
        { title: '树结构', name: 'Recursion', path: '/Recursion' },
      ]
    }
  },
  {
    path: "/BinarySearchTree",
    name: "BinarySearchTree",
    component: asyncPage("BinarySearchTree"),
    meta: {
      breadcrumb: [
        { title: '组件的递归使用', name: 'recursionComponent', path: '' },
        { title: '二叉搜索树', name: 'BinarySearchTree', path: '/BinarySearchTree' },
      ]
    }
  },
  {
    path: "/AnimateClass",
    name: "AnimateClass",
    component: asyncPage("AnimateClass"),
    meta: {
      breadcrumb: [
        { title: '过渡&动画', name: 'transitionAndAnimate', path: '' },
        { title: '基于class的过渡和动画', name: 'AnimateClass', path: '/AnimateClass' },
      ]
    }
  },
  {
    path: "/AnimateStyleBinding",
    name: "AnimateStyleBinding",
    component: asyncPage("AnimateStyleBinding"),
    meta: {
      breadcrumb: [
        { title: '过渡&动画', name: 'transitionAndAnimate', path: '' },
        { title: '过渡与style绑定', name: 'AnimateStyleBinding', path: '/AnimateStyleBinding' },
      ]
    }
  },
  {
    path: "/LargeScreen",
    name: "LargeScreen",
    component: asyncPage("LargeScreen"),
    meta: {
      breadcrumb: [
        { title: '图表', name: 'charts', path: '' },
        { title: '大屏幕', name: 'LargeScreen', path: '/LargeScreen' },
      ]
    }
  }
]

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(),
  routes
});



// process.env.BASE_URL

export default router
